<?php echo $header; ?>
<div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
 </div>
<div class='row'>
  <div class='span3'>
  <?php echo $column_left; ?>
  <?php //echo $column_right; ?>
  </div>
  <div class='span9'>
      <div id="content">
        <?php echo $content_top; ?>
        
        <h1><?php echo $heading_title; ?></h1>
        
        <?php if ($thumb || $description) { ?>
        <div class="category-info">
          <?php if ($thumb) { ?>
          <div class="image"><img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" /></div>
          <?php } ?>
          <?php if ($description) { ?>
          <?php echo $description; ?>
          <?php } ?>
        </div>
        <?php } ?>

        <?php if ($categories) { ?>
        <h2><?php echo $text_refine; ?></h2>
        <div class="category-list">
          <?php if (count($categories) <= 5) { ?>
          <ul>
            <?php foreach ($categories as $category) { ?>
            <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
            <?php } ?>
          </ul>
          <?php } else { ?>
          <?php for ($i = 0; $i < count($categories);) { ?>
          <ul>
            <?php $j = $i + ceil(count($categories) / 4); ?>
            <?php for (; $i < $j; $i++) { ?>
            <?php if (isset($categories[$i])) { ?>
            <li><a href="<?php echo $categories[$i]['href']; ?>"><?php echo $categories[$i]['name']; ?></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>
          <?php } ?>
        </div>
        <?php } ?>
        
        <?php if ($products) { ?>

        <div class="product-filter">
        <div class="row-fluid">
          <div class='span12'>
          
          <div class="display pull-left">
            <div class='btn-group'>
              <span class='btn btn-inverse disabled'><?php echo $text_display; ?></span>
              <span class='btn disabled'><i class="icon-list"></i> <?php echo $text_list; ?><span>
              <a class='btn' onclick="display('grid');"><i class="icon-th-large"></i> <?php echo $text_grid; ?></a>
            </div>
          </div>
          
          <div class="limit pull-right form-horizontal">
            <b><?php echo $text_limit; ?></b>
            <select onchange="location = this.value;">
              <?php foreach ($limits as $limits) { ?>
              <?php if ($limits['value'] == $limit) { ?>
              <option value="<?php echo $limits['href']; ?>" selected="selected"><?php echo $limits['text']; ?></option>
              <?php } else { ?>
              <option value="<?php echo $limits['href']; ?>"><?php echo $limits['text']; ?></option>
              <?php } ?>
              <?php } ?>
            </select>
          </div>
          
          <div class="sort pull-right form-horizontal"><b><?php echo $text_sort; ?></b>
            <select onchange="location = this.value;">
              <?php foreach ($sorts as $sorts) { ?>
              <?php if ($sorts['value'] == $sort . '-' . $order) { ?>
              <option value="<?php echo $sorts['href']; ?>" selected="selected"><?php echo $sorts['text']; ?></option>
              <?php } else { ?>
              <option value="<?php echo $sorts['href']; ?>"><?php echo $sorts['text']; ?></option>
              <?php } ?>
              <?php } ?>
            </select>
          </div>
        
          </div>
        </div>
        </div>
        <br />
        <div class="product-compare"><a href="<?php echo $compare; ?>" id="compare-total"><?php echo $text_compare; ?></a></div>
        <br />
        <div class="product-list">
          <?php foreach ($products as $product) { ?>
          <div>
            <?php if ($product['thumb']) { ?>
            <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>
            <?php } ?>
            <div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
            
            <?php if ($product['price']) { ?>
            <div class="price">
              <?php if (!$product['special']) { ?>
              <?php echo $product['price']; ?>
              <?php } else { ?>
              <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
              <?php } ?>
              <?php if ($product['tax']) { ?>
              <br />
              <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
              <?php } ?>
            </div>
            <?php } ?>
            
            <div class="cart">
              <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="btn" />
            </div>
            <div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a></div>
            <div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a></div>
            <div class='quick'>
            <a href="#my<?php echo $product['product_id']; ?>" role="button" class="btn btn-grey" data-toggle="modal">Quick View</a>
            </div>
          </div>
          <?php } ?>
        </div>

        <div class="pagination"><?php echo $pagination; ?></div>
        <?php } ?>
        <?php if (!$categories && !$products) { ?>
        <div class="content"><?php echo $text_empty; ?></div>
        <div class="buttons">
          <div class="right"><a href="<?php echo $continue; ?>" class="btn"><?php echo $button_continue; ?></a></div>
        </div>
        <?php } ?>
        <?php echo $content_bottom; ?>
      </div>
  </div>
<!-- row end -->
</div>

<script type="text/javascript" src='catalog/view/javascript/jquery.elevatezoom.js'></script>

<!-- modal -->
<?php foreach ($products as $product) { ?>
  <div id="my<?php echo $product['product_id']; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel"><?php echo $product['name']; ?></h3>
    </div>
    <div class="modal-body">
      <img id="zoom_01" src="<?php echo $product['thumbs']; ?>" data-zoom-image="<?php echo $product['thumbmo']; ?>" />
      <p class="description"><?php echo $product['description']; ?></p>
      <?php if ($product['price']) { ?>
            <div class="price">
              <?php if (!$product['special']) { ?>
              <?php echo $product['price']; ?>
              <?php } else { ?>
              <span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
              <?php } ?>
              <?php if ($product['tax']) { ?>
              <br />
              <span class="price-tax"><?php echo $text_tax; ?> <?php echo $product['tax']; ?></span>
              <?php } ?>
            </div>
            <?php } ?>
      <br />
      <?php if ($product['rating']) { ?>
      <div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>
      <?php } ?>
      <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="btn" />
      <a class="btn" onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a>
      <a class="btn" onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a>
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
<?php } ?>
<!-- modal end -->

<!-- js start -->
<script type="text/javascript"><!--

function display(view) {
	if (view == 'list') {
		$('.product-grid').attr('class', 'product-list');
		$('.display').html('<div class="btn-group"><span class="btn btn-inverse disabled"><?php echo $text_display; ?></span><span class="btn disabled"><i class="icon-list"></i> <?php echo $text_list; ?></span><a class="btn" onclick="display(\'grid\');"><i class="icon-th-large"></i> <?php echo $text_grid; ?></a></div>');
		$.totalStorage('display', 'list'); 
	} else {
    $('.product-list').attr('class', 'product-grid');
		$('.display').html('<div class="btn-group"><span class="btn btn-inverse disabled"><?php echo $text_display; ?></span><a class="btn" onclick="display(\'list\');"><i class="icon-list"></i> <?php echo $text_list; ?></a> <span class="btn disabled"><i class="icon-th-large"></i> <?php echo $text_grid; ?></span></div>');
		$.totalStorage('display', 'grid');
	}
}

view = $.totalStorage('display');

if (view) {
	display(view);
} else {
	display('list');
}
//--></script> 
<script>
    $('#zoom_01').elevateZoom({
    zoomType: "inner",
    cursor: "crosshair",
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 750
   });
    //initiate the plugin and pass the id of the div containing gallery images
  $("#zoom_03").elevateZoom({
    gallery:'gallery_01',
    zoomType: "inner", 
    cursor: 'pointer', 
    galleryActiveClass: 'active', 
    imageCrossfade: true, 
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 750,
    loadingIcon: 'catalog/view/theme/image/spinner.gif'}); 

    //pass the images to Fancybox
    $("#zoom_03").bind("click", function(e) {  
      var ez =   $('#zoom_03').data('elevateZoom'); 
      $.fancybox(ez.getGalleryList());
      return false;
    });
</script>
<?php echo $footer; ?>